<template>
	<div :id="id" class="chart"></div>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			id: this.getID(),
			myChart: null,
		};
	},
	methods: {
		getID() {
			return 'oeeboard-chart1-' + new Date().getTime() + Math.random();
		},
		resize() {
			this.myChart.resize();
		},
		initChart(xDate, plan, complete, rate) {
			this.myChart = echarts.init(document.getElementById(this.id));

			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				// toolbox: {
				// 	feature: {
				// 		dataView: { show: true, readOnly: false },
				// 		magicType: { show: true, type: ['line', 'bar'] },
				// 		restore: { show: true },
				// 		saveAsImage: { show: true },
				// 	},
				// },
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				itemStyle: {
					width: 10,
					borderRadius: [20, 20, 0, 0],
				},
				color: ['#3574f8', '#5cc4ad', '#f07a7c'],
				legend: {
					right: '4%',
					data: ['计划', '完成', '达成率'],
				},
				xAxis: [
					{
						type: 'category',
						data: xDate,
						axisPointer: {
							type: 'shadow',
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '数量',
						// min: 0,
						// max: 250,
						// interval: 50,
						// axisLabel: {
						// 	formatter: '{value} ml',
						// },
					},
					{
						type: 'value',
						name: '完成率',
						// min: 0,
						// max: 3,
						// interval: 30,
						axisLabel: {
							formatter: '{value}%',
						},
					},
				],
				series: [
					{
						name: '计划',
						type: 'bar',
						// tooltip: {
						// 	valueFormatter: function (value) {
						// 		return value + ' ml';
						// 	},
						// },
						tooltip: {
							valueFormatter: function (value) {
								return (value.toFixed(3));
							},
						},
						data: plan,
					},
					{
						name: '完成',
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return (value.toFixed(3));
							},
						},
						data: complete,
					},
					{
						name: '达成率',
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return (value.toFixed(2)) + ' %';
							},
						},
						data: rate,
					},
				],
			};
			this.myChart.setOption(option);
			window.addEventListener('resize', () => {
				setTimeout(this.resize, 100);
			});
		},
	},
	mounted() {},
	destroyed() {
		window.removeEventListener('resize', this.resize);
	},
};
</script>

<style scoped>
.chart {
	width: 100%;
	height: 100%;
}
</style>
